/* You can add global styles to this file, and also import other style files */
html,
body {
    height: 100%;
}

body {
    margin: 0;
    font-family: Roboto, "Helvetica Neue", sans-serif;
    background: #fafafa;
}

main {
    margin: 15px;
}

th {
    cursor: pointer;
}

// .table-dark {
//     --bs-table-bg: #ccc;
//     color: #000;
// }

.scroller {
    max-height: 350px;
    overflow-y: auto;
}

.search-results {
    width: 25vw;
}
.mat-mdc-tab-body-content {
    padding-top: 10px;
}

.three-column {
    display: grid;
    grid-template-columns: auto auto auto;
    align-items: center;
    justify-content: left;
    grid-gap: 10px;
}

.spinner {
    height: 60px;
    width: 60px;
    animation: rotation .6s infinite linear;
    border-left: 6px solid rgba(0, 174, 239, .15);
    border-right: 6px solid rgba(0, 174, 239, .15);
    border-bottom: 6px solid rgba(0, 174, 239, .15);
    border-top: 6px solid rgba(0, 174, 239, .8);
    border-radius: 100%;
}

@keyframes rotation {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(359deg);
    }
}

.close-button {
    position: absolute;
    top: 0;
    right: 0;
    color: black;
    background: transparent;
    border: none;
    cursor: pointer;
}

 
.button-color.mdc-button.mdc-button--outlined:hover {
    background-color: #3f51b5;
    color: #fff;
}
  
.button-color.mat-mdc-menu-item:hover {
    background-color: #3f51b5;

    & .mdc-list-item__primary-text, & mat-icon {
        color: #fff;
    }
}